<template>
  <div class="position-banner wh">
    <div class="introduce">
      <ul class="about-list">
        <li v-for="(item, index) in aboutList" :key="index"
            @click="addActive(item, index)"
            :class="{active1:index == currentIndex}">
          {{ item }}
          <i class="active-left"></i>
          <i class="active-right"></i></li>
      </ul>
      <div class="introduce-sss" v-if="currentIndex == 0">
        <div class="introduce-title">
          <span>公司简介</span>
        </div>
        <div class="introduce-content">
          <p>
            中富竞娱文体科技有限公司隶属于中科富融科技集团，是中国领先的游戏研发、体育赛事运营商。公司于2018年正式成为奥林匹克博览会战略支持机构，双方携手打造线上线下相结合的奥林匹克智力运动大赛、在线体育竞技的全新生态，并于全球首次创立了以奥林匹克元素为背景的线下智力运动馆体系，响应全民健身口号，践行绿色竞技理念，宣扬健康生活方式。中富竞娱具备高水准的产品设计及研发能力，拥有数百款体育、益智、文化、竞技类游戏产品，公司励志为进入中国乃至全球互联网公司第一梯队而持续创新、努力。</p>
        </div>
      </div>
      <div class="introduce-sss" v-else-if="currentIndex == 1">
        <div class="qualification-title">
          <span>公司资质</span>
        </div>
        <div class="qualification-scroll">
          <div class="qualification-content">
            <ul class="qual-company">
              <li><span>营业执照</span></li>
              <li><span>ICP</span></li>
              <li><span>网络文化经营许可证</span></li>
            </ul>
            <p>软件著作登记证书</p>
            <ul class="qual-software">
              <li><span>AK棋牌大厅</span></li>
              <!--<li><span>奥马哈扑克</span></li>-->
              <li><span>大菠萝</span></li>
              <!--<li><span>德州扑克</span></li>-->
              <!--<li><span>斗牛软件</span></li>-->
              <li><span>欢乐斗地主</span></li>
              <li><span>海盗扑克</span></li>
              <li><span>欢乐30秒</span></li>
              <!--<li><span>乐透金花软件</span></li>-->
              <li><span>欢乐四川麻将</span></li>
              <!-- <li><span>中富竞娱百人德州扑克</span></li>-->
              <!--<li><span>中富竞娱德州扑克</span></li>-->
              <li><span>中富竞娱夺金联盟</span></li>
              <li><span>中富竞娱红中麻将</span></li>
              <li><span>中富竞娱欢乐斗地主</span></li>
              <li><span>中富竞娱欢乐四川麻将</span></li>
              <li><span>中富竞娱欢拼十</span></li>
              <li><span>中富竞娱魔法动物</span></li>
              <li><span>中富竞娱魔法符文</span></li>
              <li><span>中富竞娱奇妙水世界</span></li>
              <li><span>中富竞娱水果大丰收</span></li>
            </ul>
            <ul class="qual-software1">
              <li><span>中富竞娱消消甜品屋</span></li>
              <li style="margin-left: 30px"><span>中富竞娱渔夫码头</span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="introduce-sss" v-if="currentIndex == 2">
        <div class="introduce-title">
          <span>公司声明</span>
        </div>
        <div class="introduce-content">
          <div class="introduce-content-1">
            <span>尊敬的中富竞娱用户：</span>
            <p>我司是中国领先的游戏研发、智力赛事运营商。重点打造以奥林匹克知识、文化为背景的奥林匹克智力运动大赛、在线体育竞技、在线益智竞技的全新生态。因此，为响应国家主管部门践行绿色竞技理念，宣扬健康生活方式的号召，净化网络环境，我司特向各位用户郑重提示：</p>
            <p>一、各类游戏每局游戏结算后的积分仅是游戏对战的成绩记录，不具有货币属性，不具有货币价值，亦不可流通。</p>
            <p>二、各类游戏中的房卡只是游戏里的一个道具，仅为开设房间而使用，不具备其他任何功能和价值。</p>
            <p>三、我司严禁用户之间进行任何形式的赌博行为，并欢迎广大玩家通过客服、后台及相应渠道进行监督、举报。如我司发现用户有赌博行为的，我司将立即关闭其账号，情节严重的，我司将报告至公安机关依法处理。</p>
            <p>四、请勿相信任何非中富竞娱官方渠道发布的信息，以免造成个人财物损失。</p>
            <p>最后，希望各位用户文明参与竞技游戏，远离赌博！祝各位用户在竞技游戏中玩得开心，玩得放心！</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'companyIntroduce',
  data () {
    return {
      currentIndex: 0,
      aboutList: ['公司简介', '公司资质', '公司声明']
    }
  },
  methods: {
    addActive (item, index) {
      this.currentIndex = index
    }
  }
}
</script>

<style scoped>
  .wh {
    width: 1073px;
    height: 598px;
  }

  .introduce {
    width: 1073px;
    height: 598px;
    background: url("../assets/images/about/about_bg.png") no-repeat center;
    background-size: 1073px 598px;
  }

  .about-list {
    position: absolute;
    top: 19px;
    left: 122px;
    overflow: hidden;
    transform: skew(-25deg);
  }

  .about-list li {
    position: relative;
    width: 107px;
    height: 46px;
    font-size: 18px;
    color: #f8b5e9;
    text-align: center;
    line-height: 46px;
    transform: skew(25deg);
    cursor: pointer;
  }

  .active1 {
    font-size: 20px !important;
    color: #fff !important;
  }

  .active1 .active-left {
    position: absolute;
    left: 0;
    top: 16px;
    width: 7px;
    height: 14px;
    background: url("../assets/images/about/about_icon1.png") no-repeat center;
    background-size: 7px 14px;
  }

  .active1 .active-right {
    position: absolute;
    right: 0;
    top: 16px;
    width: 7px;
    height: 14px;
    background: url("../assets/images/about/about_icon2.png") no-repeat center;
    background-size: 7px 14px;
  }

  .introduce-sss{
    width: 720px;
    margin-left: 241px;
  }

  .introduce-title {
    line-height: 94px;
    text-align: center;
    font-size: 28px;
  }

  .introduce-title span{
    margin-left: 60px;
  }

  .introduce-content {
    width: 653px;
    height: 420px;
    margin-left: 30px;
    margin-top: 42px;
    overflow: hidden;
  }

  .introduce-content-1{
    width: 670px;
    height: 420px;
    overflow-y: scroll;
  }

  .introduce-content p {
    font-size: 18px;
    text-indent: 2em;
    text-align: justify;
    color: #cbc9cc;
    line-height: 36px;
  }
  .introduce-content span{
    font-size: 18px;
    text-align: justify;
    color: #cbc9cc;
    line-height: 36px;
  }
  .qualification-title{
    line-height: 94px;
    text-align: center;
    font-size: 28px;
  }
  .qualification-title span{
    padding-left: 59px;
  }
  .qualification-scroll{
    width: 720px;
    height: 450px;
    overflow: hidden;
  }
  .qualification-content{
    width: 1025px;
    height: 450px;
    margin: 20px auto 0;
    overflow-y: scroll;
  }
  .qualification-content p{
    width: 720px;
    margin-top: 26px;
    font-size: 22px;
    padding-left: 12px;
    border-left: 6px solid #ba3382;
    line-height: 24px;
  }
  .qual-company{
    width: 720px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
  }
  .qual-company li{
    position: relative;
    width: 220px;
    height: 322px;
    background-size: 220px 322px!important;
  }
  .qual-company li span{
    display: block;
    padding-top: 282px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }
  .qual-company li:nth-child(1){
    background: url('../assets/images/zizhi/yyzz.png') no-repeat center
  }
  .qual-company li:nth-child(2){
    background: url('../assets/images/zizhi/ICP.png') no-repeat center
  }
  .qual-company li:nth-child(3){
    background: url('../assets/images/zizhi/jyxk.png') no-repeat center
  }
  .qual-software{
    width: 720px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .qual-software li{
    position: relative;
    margin-top: 8px;
    width: 220px;
    height: 322px;
    background-size: 220px 322px!important;
  }
  .qual-software li span{
    display: block;
    padding-top: 282px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }
  .qual-software1{
    width: 720px;
    overflow: hidden;
    display: flex;
  }
  .qual-software1 li{
    position: relative;
    margin-top: 8px;
    margin-bottom: 8px;
    width: 220px;
    height: 322px;
    background-size: 220px 322px!important;
  }
  .qual-software1 li span{
    display: block;
    padding-top: 282px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
  }
  .qual-software li:nth-child(1){
    background: url('../assets/images/zizhi/AKpooker.png') no-repeat center
  }
  .qual-software li:nth-child(2){
    background: url('../assets/images/zizhi/dbl.png') no-repeat center
  }
  .qual-software li:nth-child(3){
    background: url('../assets/images/zizhi/dzpk.png') no-repeat center
  }
  .qual-software li:nth-child(4){
    background: url('../assets/images/zizhi/hd.png') no-repeat center
  }
  .qual-software li:nth-child(5){
    background: url('../assets/images/zizhi/hl30m.png') no-repeat center
  }
  .qual-software li:nth-child(6){
    background: url('../assets/images/zizhi/scmj.png') no-repeat center
  }
  .qual-software li:nth-child(7){
    background: url('../assets/images/zizhi/zfjy03.png') no-repeat center
  }
  .qual-software li:nth-child(8){
    background: url('../assets/images/zizhi/zfjy04.png') no-repeat center
  }
  .qual-software li:nth-child(9){
    background: url('../assets/images/zizhi/zfjy05.png') no-repeat center
  }
  .qual-software li:nth-child(10){
    background: url('../assets/images/zizhi/zfjy06.png') no-repeat center
  }
  .qual-software li:nth-child(11){
    background: url('../assets/images/zizhi/zfjy07.png') no-repeat center
  }
  .qual-software li:nth-child(12){
    background: url('../assets/images/zizhi/zfjy08.png') no-repeat center
  }
  .qual-software li:nth-child(13){
    background: url('../assets/images/zizhi/zfjy09.png') no-repeat center
  }
  .qual-software li:nth-child(14){
    background: url('../assets/images/zizhi/zfjy10.png') no-repeat center
  }
  .qual-software li:nth-child(15){
    background: url('../assets/images/zizhi/zfjy11.png') no-repeat center
  }
  .qual-software1 li:nth-child(1){
    background: url('../assets/images/zizhi/zfjy12.png') no-repeat center
  }
  .qual-software1 li:nth-child(2){
    background: url('../assets/images/zizhi/zfjy13.png') no-repeat center
  }
</style>
